<template>
  <div>
    <table>
      <MySale 
      @input="item.count=$event - 0"
      v-for="(item,index) in goodsArr" :key="index"
      :obj="item"
      ></MySale>
    </table>
    <h3>总价是：{{all}}</h3>
  </div>
</template>

<script>
import MySale from './components/my-sale.vue'
export default {
  data(){
    return {
      goodsArr: [
    {
        count: 0,
        goodsName: "Watermelon"
    }, {
        count: 0,
        goodsName: "Banana"
    }, {
        count: 0,
        goodsName: "Orange"
    }, {
        count: 0,
        goodsName: "Pineapple"
    }, {
        count: 0,
        goodsName: "Strawberry"
    }
]
    }
  },
  components:{
    MySale,
  },
  // 计算属性
  computed:{
   all(){
    return this.goodsArr.reduce((sum,item)=>sum + item.count,0)
   }
  }
}
</script>

<style scoped>

</style>